<template>
  <div class="info-box">

    <div v-for="(item, index) in datass" :key="item.id">
      <div class="top-box">
        <!-- 级别（一级，二级，三级） -->
        <div :style="{ backgroundColor: item.bgc }">{{ item.text }}</div>

        <div style="margin-left: 5px;">{{ item.type }}·{{ item.describe }}</div>
      </div>
      <div class="bottom-box">
        <div>
          <EnvironmentOutlined />&nbsp;&nbsp;{{ item.pos }}
        </div>
        <div style="font-size: 8px;">{{ item.time }}</div>
      </div>
    </div>

  </div>
</template>
<script setup>
import { ref, computed, onBeforeMount } from "vue";
import './info.scss'
import emitter from '@/utils/eventBus';
import { EnvironmentOutlined } from '@ant-design/icons-vue';
import db from "@/data/db.js";


onBeforeMount(() => {
  console.log("onBeforeMount");
  init();
})

const obj = {
  1: "一级",
  2: "二级",
  3: "三级",
}

const bgcs = {
  1: "red",
  2: "orange",
  3: "skyblue",
}

// 初始化
const init = () => {
  db.forEach(item => {
    item.text = obj[item.level];
    item.bgc = bgcs[item.level];
  });
}

// 声明属性
// defineProps([])

// 定义状态的条件
const state = ref("pending");
// 监听事件(改变状态)
emitter.on("changeState", (val) => {
  state.value = val;
  console.log("state.value", state.value);
})

const type = ref("全部类型");
// 监听事件（改变类型）
emitter.on("changeType", (val) => {
  console.log("changeType", val);
  type.value = val;
})

const pos = ref("");
// 监听事件（搜索位置条件）
emitter.on("changePos", (val) => {
  console.log("changePos", val);
  pos.value = val;
})


// 要展示的数据：

let datass = computed(() => {

  console.log("computed");
  const temps = db.filter(item => {

    // if (type.value == "全部类型") {
    //   return item.state == state.value && true;
    // } else {
    //   return item.state == state.value && item.type == type.value;
    // }

    return (item.state == state.value) && (type.value === "全部类型" ? true : item.type == type.value) && (pos.value === "" ? true : item.pos.includes(pos.value));

  });
  
  console.log("temps", temps);
  return temps;
})







</script>

<style lang="scss"></style>